<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <view class="news-detail">
        <view class="news-image">
            <view class="news-cate">{{ newsData.type }}</view>
            <u-image
                :src="getImageUrl(newsData.images)"
                class="news-image"
                width="100%"
                height="250rpx"
                border-radius="16"
            ></u-image>
            <view class="news-hits">浏览量：{{ newsData.hits }}</view>
        </view>
        <!-- 标题信心 -->
        <view class="news-detail-header py-[20rpx] px-[30rpx] mt-[20rpx] bg-white">
            <view class="text-3xl font-medium">{{ newsData.title }}</view>
            <view class="flex mt-[20rpx] text-xs">
                <view class="text-muted mr-[40rpx] flex-1">{{ newsData?.village?.name }}</view>
            </view>
            <view class="flex mt-[20rpx] text-xs">
                <view class="text-muted mr-[40rpx] flex-1">{{ newsData.create_time }}</view>
            </view>
        </view>

        <!-- 咨询内容 -->
        <view class="news-detail-section bg-white p-[24rpx] mt-[20rpx]">
            <!-- 摘要 -->
            <view class="news-title p-[20rpx]">
                <text>项目详情</text>
            </view>
            <view class="summary p-[20rpx] text-base" v-if="newsData.summary">
                <text class="font-medium">摘要:</text>
                {{ newsData.summary }}
            </view>
            <!-- 内容 -->
            <view class="mt-[20rpx]">
                <u-parse :html="newsData.content"></u-parse>
            </view>
        </view>
    </view>
    <view class="bottom-buttons">
        <view class="customer-service">
            <u-button
                type="primary"
                @click="openCustomerService"
                size="mini"
                shape="circle"
                :custom-style="{ backgroundColor: '#c00000' }"
            >
                <view class="button-content">
                    <u-image src="/static/images/icon/kefu.png" width="30" height="30"></u-image>
                    <text class="ml-[10rpx]">平台客服</text>
                </view>
            </u-button>
        </view>
        <!-- 分享按钮 -->
        <view class="share-btn">
            <u-button
                type="success"
                @click="sharePage"
                size="mini"
                shape="circle"
                :custom-style="{ backgroundColor: '#ffa200' }"
            >
                <view class="button-content">
                    <u-image src="/static/images/icon/zf.png" width="30" height="30"></u-image>
                    <text class="ml-[10rpx]">转发</text>
                </view>
            </u-button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getKeyProjectDetail } from '@/api/key_project'
import { useAppStore } from '@/stores/app'

const { getImageUrl, getConfig } = useAppStore()
const newsData = ref<any>({})
let newsId = ''

const getData = async (id) => {
    newsData.value = await getKeyProjectDetail({ id })
}
const sharePage = () => {
    uni.share({
        title: '项目详情',
        path: `/pages/key_project_detail/key_project_detail?id=${newsId}`,
        success: () => {
            uni.showToast({
                title: '分享成功'
            })
        },
        fail: () => {
            uni.showToast({
                title: '分享失败',
                icon: 'none'
            })
        }
    })
}
const onShareAppMessage = (res) => {
    if (res.from === 'button') {
        // 来自页面内分享按钮
        console.log(res.target)
    }
    return {
        title: newsData.value.title,
        path: `/pages/key_project_detail/key_project_detail?id=${newsId}`,
        imageUrl: '' // 可以设置分享图片
    }
}

// 分享到朋友圈
const onShareTimeline = () => {
    return {
        title: newsData.value.title,
        query: '',
        imageUrl: getImageUrl(newsData.value.images)
    }
}
const openCustomerService = () => {
    try {
        uni.makePhoneCall({
            phoneNumber: useAppStore()?.getWebsiteConfig?.web_tel
        })
    } catch (error) {
        console.log('电话拨打被取消或失败:', error)
    }
}
onLoad((options: any) => {
    newsId = options.id
    getData(newsId)
})
</script>

<style lang="scss">
.news-detail {
    height: calc(100vh - env(safe-area-inset-bottom) - 80rpx);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;

    &-header {
        border-radius: 16rpx;
    }

    &-section {
        border-radius: 16rpx;

        .summary {
            background-color: #f7f7f7;
        }
    }

    .panel-btn {
        position: fixed;
        right: 30rpx;
        height: 80rpx;
        bottom: 80rpx;
        border-radius: 40rpx;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    }
}

.news-title {
    text-align: center;
    position: relative;
}

.news-title text {
    font-size: 36rpx;
    font-weight: bold;
    position: relative;
    display: inline-block;
    z-index: 2; /* 确保文字在背景上方 */
}

.news-title text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    background: #bbdbfd;
    /* 实现左侧斜切，右侧圆角 */
    clip-path: polygon(100% 100%, 0 100%, 0 0, calc(100% - 16rpx) 0);
    z-index: -1;
}

.news-image {
    width: 100%;
    position: relative;

    .news-cate {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10; /* 提高z-index确保在图片上方 */
        background-color: #c00000; /* 添加背景色提高可读性 */
        color: white; /* 设置文字颜色 */
        padding: 5rpx 10rpx; /* 添加内边距 */
        border-top-left-radius: 16rpx; /* 圆角与卡片一致 */
        border-bottom-right-radius: 16rpx;
        font-size: 22rpx;
    }

    .news-hits {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 10; /* 提高z-index确保在图片上方 */
        background-color: rgba(0, 0, 0, 0.4); /* 添加背景色提高可读性 */
        color: white; /* 设置文字颜色 */
        padding: 5rpx 10rpx; /* 添加内边距 */
        border-bottom-right-radius: 16rpx; /* 圆角与卡片一致 */
        border-top-left-radius: 16rpx;
        font-size: 22rpx;
    }
}

.bottom-buttons {
    margin: 20rpx 0 30rpx 0;
    display: flex;
    align-items: center;
    background-color: white;
    font-size: 30rpx;
    gap: 30rpx;
    text-align: center;
    justify-content: center;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    padding: 20rpx 0; /* 额外留白 */
}

.button-content {
    display: flex;
    align-items: center;
    justify-content: center;

    text {
        margin-top: 10rpx;
    }
}

.customer-service {
    align-items: center;
    width: 40%;
    background-color: #c00000;
    text-align: center;
    border-radius: 32rpx;
}

.share-btn {
    align-items: center;
    width: 40%;
    background-color: #ffa200;
    text-align: center;
    border-radius: 32rpx;
}
</style>
